<template>
	<div v-if="list" class="foSi14" style="padding: 20px;">
    <div class="wid100 hei44 item-l dis disAl mar-bott5">
      <div class="item-w item-p item-r dis disAl disJuB">
        <div>姓名</div>
        <div>{{list.member_name}}</div>
      </div>
      <div class="item-w item-p item-r dis disAl disJuB">
        <div>手机</div>
        <div>{{list.member_tel}}</div>
      </div>
      <div class="item-w item-p dis disAl disJuB">
        <div>状态</div>
        <div>{{list.go_out==0?'正常':'出班'}}</div>
      </div>
    </div>
		<div class="foSi12 titl">基本信息</div>
		<div class="wid100 hei44 item-l dis disAl mar-bott5">
			<div class="item-w item-p item-r dis disAl disJuB">
				<div>班级名称</div>
				<div>{{list.class_name}}</div>
			</div>
			<div class="item-w item-p dis disAl disJuB">
				<div>报班时间</div>
				<div>{{list.createtime}}</div>
			</div>
		</div>
		<div class="wid100 hei44 item-l dis disAl mar-bott5">
			<div class="item-w item-p item-r dis disAl disJuB">
				<div>入班时间</div>
				<div>{{list.join_time}}</div>
			</div>
			<div class="item-w item-p dis disAl disJuB">
				<div>有效期</div>
				<div>{{list.term == 0?'长期':list.term+'天'}}</div>
			</div>
		</div>
		<div class="wid100 hei44 item-l dis disAl mar-bott5">
			<div class="item-w item-p item-r dis disAl disJuB">
				<div>消耗课时</div>
				<div>￥{{list.consume_class_hour}}</div>
			</div>
			<div class="item-w item-p dis disAl disJuB">
				<div>剩余课时</div>
				<div>{{list.surplus_class_hour}}</div>
			</div>
		</div>
		<div class="wid100 hei44 item-l dis disAl mar-bott5">
			<div class="item-w item-p item-r dis disAl disJuB">
				<div>总课时</div>
				<div>{{list.class_hour}}</div>
			</div>
			<div class="item-w item-p dis disAl disJuB">
				<div>上课次数</div>
        <div>{{list.begins_num}}</div>
			</div>
		</div>
		<div class="wid100 hei44 item-l dis disAl mar-bott5">
			<div class="item-w item-p item-r dis disAl disJuB">
				<div>请假次数</div>
				<div>{{list.leave_num == 0?'不可请假':list.leave_num}}</div>
			</div>
      <div class="item-w item-p dis disAl disJuB">
        <div>旷课次数</div>
        <div>{{list.skip_num}}</div>
      </div>
		</div>
		<div class="mar-top30 dis hei40 foSi16 mar-bott20" style="border-bottom: 1px solid #d9d9d9;">
			<div class="hei100 item-p dis disAl cuPo" @click.stop="typeClick(1)" :class="type === 1?'curr':'curr1'">上课记录
			</div>
			<div class="hei100 item-p dis disAl cuPo" @click.stop="typeClick(2)" :class="type === 2?'curr':'curr1'">请假记录
			</div>
			<div class="hei100 item-p dis disAl cuPo" @click.stop="typeClick(3)" :class="type === 3?'curr':'curr1'">旷课记录
			</div>
			<div class="hei100 item-p dis disAl cuPo" @click.stop="typeClick(4)" :class="type === 4?'curr':'curr1'">课时变动记录
			</div>
			<div class="hei100 item-p dis disAl cuPo" @click.stop="typeClick(5)" :class="type === 5?'curr':'curr1'">电子合同
			</div>
		</div>
		<div v-if="type === 1">
			<div style="margin-top: 20px">
				<el-table :data="qjlist" v-loading="listLoading1" stripe style="width: 100%">
					<div slot="empty" class="m-empty-box">
						<div class="mar" style="width: 168px;height: 180px;">
							<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100"/>
						</div>
						<div class="title">暂无数据</div>
					</div>
					<el-table-column prop="class_time" label="课程时间	" />
					<el-table-column prop="coach_name" label="课程" />
					<el-table-column prop="member_count" label="老师" />
					<el-table-column prop="createtime" label="签到时间" />
					<el-table-column label="操作	">
						<template slot-scope="scope">
							<div class="dis disAl flwa">
								<div class="dis disAl mar-right10 cuPo mar-bott5" @click="state(scope.row.id,1)">
									<i class="el-icon-document" style="color: rgb(25, 165, 88); font-size: 20px" />请假
								</div>
							</div>
							<div class="dis disAl flwa">
								<div class="dis disAl mar-right10 cuPo mar-bott5" @click="state(scope.row.id,3)">
									<i class="el-icon-document" style="color: rgb(25, 165, 88); font-size: 20px" />旷课
								</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
					@pagination="qjlist" />
			</div>
		</div>
		<div v-if="type === 2">
			<div style="margin-top: 20px">
				<el-table :data="qjlist" v-loading="listLoading1" stripe style="width: 100%">
					<div slot="empty" class="m-empty-box">
						<div class="mar" style="width: 168px;height: 180px;">
							<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100"/>
						</div>
						<div class="title">暂无数据</div>
					</div>
					<el-table-column prop="start_time_desc" label="课程时间" />
					<el-table-column prop="coach_name" label="课程" />
					<el-table-column prop="class_member_nums" label="老师" />
					<el-table-column prop="leave_nums" label="请假时间" />
					<el-table-column prop="sign_nums" label="操作" >
            <div class="dis disAl mar-right10 cuPo mar-bott5" @click="state(scope.row.id,0)">
              <i class="el-icon-document" style="color: rgb(25, 165, 88); font-size: 20px" />取消请假
            </div>
            <div class="dis disAl mar-right10 mar-bott5" @click="state(scope.row.id,1)">
              <i class="el-icon-document" style="color: #999; font-size: 20px" />签到
            </div>
          </el-table-column>
				</el-table>
				<pagination v-show="total1>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
					@pagination="qjlist" />
			</div>
		</div>
    <div v-if="type === 3">
      <div style="margin-top: 20px">
        <el-table :data="qjlist" v-loading="listLoading1" stripe style="width: 100%">
          <div slot="empty" class="m-empty-box">
            <div class="mar" style="width: 168px;height: 180px;">
              <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100"/>
            </div>
            <div class="title">暂无数据</div>
          </div>
          <el-table-column prop="start_time_desc" label="课程时间" />
          <el-table-column prop="coach_name" label="课程" />
          <el-table-column prop="class_member_nums" label="老师" />
          <el-table-column prop="sign_nums" label="操作" >
            <div class="dis disAl mar-right10 cuPo mar-bott5" @click="state(scope.row.id,0)">
              <i class="el-icon-document" style="color: rgb(25, 165, 88); font-size: 20px" />取消请假
            </div>
            <div class="dis disAl mar-right10 mar-bott5" @click="state(scope.row.id,1)">
              <i class="el-icon-document" style="color: #999; font-size: 20px" />签到
            </div>
          </el-table-column>
        </el-table>
        <pagination v-show="total1>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                    @pagination="qjlist" />
      </div>
    </div>
    <div v-if="type === 4">
      <div style="margin-top: 20px">
        <el-table :data="qjlist" v-loading="listLoading1" stripe style="width: 100%">
          <div slot="empty" class="m-empty-box">
            <div class="mar" style="width: 168px;height: 180px;">
              <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100"/>
            </div>
            <div class="title">暂无数据</div>
          </div>
          <el-table-column prop="start_time_desc" label="变动时间" />
          <el-table-column prop="coach_name" label="操作者" />
          <el-table-column prop="class_member_nums" label="变动类型" />
          <el-table-column prop="leave_nums" label="变动前课时" />
          <el-table-column prop="sign_nums" label="变动后课时" />
          <el-table-column prop="sign_nums" label="备注说明" />
        </el-table>
        <pagination v-show="total1>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                    @pagination="qjlist" />
      </div>
    </div>
    <div v-if="type === 5">
      <div style="margin-top: 20px">
        <el-table :data="qjlist" v-loading="listLoading1" stripe style="width: 100%">
          <div slot="empty" class="m-empty-box">
            <div class="mar" style="width: 168px;height: 180px;">
              <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100"/>
            </div>
            <div class="title">暂无数据</div>
          </div>
          <el-table-column prop="start_time_desc" label="合同ID" />
          <el-table-column prop="coach_name" label="合同名称" />
          <el-table-column prop="class_member_nums" label="合同状态" />
          <el-table-column prop="leave_nums" label="发起人" />
          <el-table-column prop="leave_nums" label="场馆签署人" />
          <el-table-column prop="leave_nums" label="发起时间" />
          <el-table-column prop="sign_nums" label="操作" >
            <div class="dis disAl mar-right10 cuPo mar-bott5" @click="state(scope.row.id,0)">
              <i class="el-icon-document" style="color: rgb(25, 165, 88); font-size: 20px" />取消请假
            </div>
            <div class="dis disAl mar-right10 mar-bott5" @click="state(scope.row.id,1)">
              <i class="el-icon-document" style="color: #999; font-size: 20px" />签到
            </div>
          </el-table-column>
        </el-table>
        <pagination v-show="total1>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                    @pagination="qjlist" />
      </div>
    </div>
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import {
    getClassMemberInfo,
    getClassMemberLeave,
    getClassMemberLeaveState
  } from '@/api/class';
	export default {
		name: 'privateParticulars',
		components: {
			Pagination
		},
		data() {
			return {
				list: null,
				type: 1,
				total: 1,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 0
				},
				tableData: [],
				total1: 0,
				listLoading1: false,
				listQuery1: {
					page: 1,
					limit: 0
				},
				tableData1: [],
				search: {
					stateList: [{
						value: '0',
						label: '全部'
					}, {
						value: '1',
						label: '上架'
					}, {
						value: '2',
						label: '下架'
					}], // 状态
					start: '',
					end: '',
					name: ''
				},
        qjlist:[]
			}
		},
		created() {
			var query = this.$route.query
			this.id = query.id
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: [{
					name: '编辑班课会员',
					url: '/course/privateParticulars',
					pd: true
				}]
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
      this.getSchoolList()
		},
		methods: {
			typeClick(index) {
				if (this.type !== index) {
            this.getClassMemberLeave(index)
					this.type = index
				}
			},
      getClassMemberLeave(type){
        this.listLoading1 = true
        this.qjlist = [];
        getClassMemberLeave({ 'id':this.id,'state':type }).then(response => {
          const {
            data
          } = response
          this.qjlist = data.data;
        }).catch(error => {
          console.log(error)
        })
        this.listLoading1 = false
      },
			fanhui() {
				this.$router.push({
					path: '/course/classPrivateList'
				})
			},
			edit() {
				this.$router.push({
					path: '/course/classPrivateEdit?type=1&id=' + this.id
				})
			},
      xiangqing() {
				this.$router.push({
					path: '/classrecord'
				})
			},
			getList1(){
				this.listLoading1 = true
				this.listLoading1 = false
			},
      state(id,state){
        getClassMemberLeaveState({'id':id,'state':state}).then(response => {
          const {
            data
          } = response
          this.getList()
        }).catch(error => {
          console.log(error)
        })
      },
			getList() {
				this.listLoading1 = true
				this.list = [];

        getClassMemberInfo({ 'id':this.id }).then(response => {
          const {
            data
          } = response
          console.log(data)
          this.list = data;
          this.tableData = [];
        }).catch(error => {
          console.log(error)
        })
				this.listLoading1 = false
			},
      sousuo(){
        this.getSchoolList();
      },
      getSchoolList(){
        this.tableData = [];
        getSchoolList({ 'id':this.id }).then(response => {
          const {
            data
          } = response
          this.tableData = data.data;
        }).catch(error => {
          console.log(error)
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.que {
		display: inline-block;
		padding: 0 24px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		vertical-align: top;
	}

	.titl {
		height: 25px;
		color: #787878;
	}

	.item-l {
		background: #f2f2f2;
		margin-bottom: 2px;
	}

	.item-p {
		padding: 0 15px;
	}

	.item-w {
		width: 50%;
		height: 100%;
	}

	.item-r {
		border-right: 2px solid #fff;
	}

	.curr {
		border-bottom: 4px solid #48a9f3;
	}

	.curr1 {
		border-bottom: 4px solid #fff;
	}
</style>
